<template>
	<view>
		
	<view class="zskuang">
		<view class="zhicu1" v-if="payorget==1"><button class="zhichu" @click="zhichu">支出</button></view>
		<view class="zhicu1" v-else><button class="zhichu2" @click="zhichu" >支出</button></view>
		<view class="shouru1" v-if="payorget==0"><button class="shouru" @click="shouru">收入</button></view>
		<view class="shouru1" v-else><button class="shouru2" @click="shouru">收入</button></view>
	</view>
	
	<view class="xiass">
		<view class="tubiao-content" v-for="(item) in countTypelist">
			  <image class="tubiao" :src="getimages(item.images)" @click="openadd(item.typename,item.images)"/>	
			  <view class="typename">{{item.typename}}</view>
		</view>
	</view>
	
	<!-- 记账单弹出 -->
	<u-popup v-model="addDialogShow" mode="bottom" :show="addDialogShow" @close="closeadd"
		:closeOnClickOverlay="true" :round="10">
		<view class="dialogCart">
			<view class="divCartTitle">
				<view class="title">记账</view>
				<view class="clear" @click="clear()">
					<view class="el-icon-delete" ></view> 清空
				</view>
			</view>
			<scroll-view scroll-y="true" :style="{ height: wh + 'rpx' }">
				<view class="divCartContent">
	           <view class="jizhangleixing">
					  <view class="jizhangleixing1">记账类型：</view>
					  <view class="typename1">{{typename}}</view>
					</view>
				  <view class="shurujinger">
					  <view class="shurujinger1">请输入金额：</view>
					  <input class="price1" type="text" placeholder="金额"  v-model="price"/>
					</view>
				  <view class="beizhu">
					  <view class="shurubeizhu1">请输入备注：</view>
				     <input class="beizhu1" type="text" placeholder="备注"  v-model="beizhu">
				  </view>
				  <view class="baocun">
					  <button class="button1" @click="savezj">保存</button>
					  <button @click="closeadd">取消</button>
				  </view>
				 
			   </view>
			</scroll-view>
		</view>
	</u-popup>
	
	 
	
	</view>
	
</template>

<script>
	import {
		addjzApi
	} from '../../api/zadd.js'
	export default {
		data() {
			return {
				//1为收入0为支出
				payorget:1,
				QiNiuYunUrl:"",
				addDialogShow:false,
				images:null,
				typename:"",
				price:null,
				beizhu:null,
				countTypelist:[
					{
						"images":"../../static/images/orderList.png",
						"typename":"日用",
					},
					{
						"images":"../../static/images/薯条.png",
						"typename":"衣物",
					},
					{
						"images":"../../static/images/index.png",
						"typename":"食物",
					},
					{
						"images":"../../static/images/orderList.png",
						"typename":"电器",
					},
					{
						"images":"../../static/images/orderList.png",
						"typename":"旅游",
					},
					{
						"images":"../../static/images/orderList.png",
						"typename":"日用",
					},
				],
			}
			},
		methods: {
			zhichu() {
				this.payorget=1
			},
			shouru() {
				this.payorget=0
			},
			getimages(path){
					return this.QiNiuYunUrl+path
			},
			openadd(typename,images){
				this.images=images,
				this.addDialogShow = true,
				this.typename=typename
			},
			closeadd() {
				this.addDialogShow = false;
			},
			clear(){
				console.log("清空")
				this.price=null;
				this.beizhu=null;
			},
			//保存记账内容
			async savezj() {
				const params = {
					images:this.images,
					getorpay:this.payorget,
					accountType:this.typename,
					price: this.price,
					massge: this.beizhu,
				}
				const res = await addjzApi(params)
				if (res.code === 1) {
				console.log("保存成功"),
				wx.showToast({
					title: '保存成功',
					icon: 'success',
					duration: 2000//持续的时间
				}),
				this.closeadd()
				} else {
					return uni.$showMsg(res.msg)
				}
			},
			
		}
		}
			
			
</script>

<style>
	@import url(./zadd.css);
</style>
